<div class="aside-body" ng-show="content">
  <div class="p-md clear">
    <div class="panel-body advert-select" style="padding-top:0">
      <select name="crtSizeMediumMenuId"  id="crtSizeMediumMenuId" class="form-control w">
        <option value="0">全部尺寸</option>
        <% @crt_size_medium_menus&.each do |crt_size_medium_menu| %>
            <option value="<%= crt_size_medium_menu.crt_size %>"
                    <% if @crtSizeMediumMenuId == crt_size_medium_menu.crt_size%>
                    selected = 'selected'
                    <%end %>
                    ><%= crt_size_medium_menu.crt_size_detail%></option>
        <% end %>
      </select>
      <input id="frontCompanyType" type="hidden" value="${form.sitesetType }"/>
    </div>

    <!-- 新增 -->
    <% @ad_group_creatives&.each do |ad_group_creatives| %>

        <% if ad_group_creatives.crt_size_medium_menu_id == 1 %>
        <div class="cy-item col-sm-4">
          <div class="panel b-a cy-materials-item" name="creativeSelect">
            <input type="hidden" value="<%= ad_group_creatives.id%>"/>
            <div class="panel-heading bg text-lt">
              <span><%=  ad_group_creatives.creative_name%> </span>
            </div>
            <div class="content">
              <div class="sb">
                <img src="<%=  ad_group_creatives.trademark_show_path%>" class="sb-icon">
                <span class="sb-name"><%=  ad_group_creatives.trademark_name%></span>
              </div>
              <p class="cy-txt">
                <%=  ad_group_creatives.creative_copywriter%>}
              </p>
              <% if ad_group_creatives.banner_path2.nil? %>
                  <div class="cy-img-list one">
                    <a href="javascript:;"> <img src="<%= ad_group_creatives.banner_show_path1%>"></a>
                  </div>
                <%else %>
                  <div class="cy-img-list three">
                    <a href="javascript:;"><img src="<%= ad_group_creatives.banner_show_path1%>"></a>
                    <a href="javascript:;"><img src="<%= ad_group_creatives.banner_show_path2%>"></a>
                    <a href="javascript:;"><img src="<%= ad_group_creatives.banner_show_path3%>"></a>
                  </div>
               <% end %>
            </div>
          </div>
        </div>
      <%end%>
        <% if ad_group_creatives.crt_size_medium_menu_id == 4 %>
        <div class="cy-item col-sm-4">
          <div class="panel b-a cy-materials-item" name="creativeSelect">
            <input type="hidden" value="<%= ad_group_creatives.id%>"/>
            <div class="panel-heading bg text-lt">
              <span><%=  ad_group_creatives.creative_name%></span>
            </div>
            <div class="content">
              <div class="cy-img-list one mt">
                <img src="<%= ad_group_creatives.banner_show_path1%>">
              </div>
            </div>
          </div>
        </div>

            <%end%>
        <% if ad_group_creatives.crt_size_medium_menu_id == 5 %>
        <div class="cy-item col-sm-4">
          <div class="panel b-a cy-materials-item" name="creativeSelect">
            <input type="hidden" value="${frontSelfOperateCreative.id}"/>
            <div class="panel-heading bg text-lt">
              <span><%= ad_group_creatives.creative_name%></span>
            </div>
            <div class="content">
              <div class="sb">
                <span class="sb-name"><%= ad_group_creatives.trademark_name%></span>
              </div>
              <p class="cy-txt">
                <%= ad_group_creatives.creative_copywriter%>
              </p>
              <% if ad_group_creatives.banner_path2.nil? %>
                  <div class="cy-img-list one">
                    <a href="javascript:;"> <img src="<%= ad_group_creatives.banner_show_path1%>"></a>
                  </div>
              <%else %>
                  <div class="cy-img-list three">
                    <a href="javascript:;"><img src="<%= ad_group_creatives.banner_show_path1%>"></a>
                    <a href="javascript:;"><img src="<%= ad_group_creatives.banner_show_path2%>"></a>
                    <a href="javascript:;"><img src="<%= ad_group_creatives.banner_show_path3%>"></a>
                  </div>
              <% end %>
            </div>
          </div>
        </div>
        <% end %>
        <% if ad_group_creatives.crt_size_medium_menu_id ==3 %>
        <div class="cy-item col-sm-4">
          <div class="panel b-a cy-materials-item" name="creativeSelect">
            <input type="hidden" value="${frontSelfOperateCreative.id}"/>
            <div class="panel-heading bg text-lt">
              <span><%= ad_group_creatives.creative_name%></span>
            </div>
            <div class="content">
              <div class="sb no-lineHeight">
                <img src="<%= ad_group_creatives.share_show_path%>" class="sb-icon">
                <div class="sb-name-container have-desc-sbName">
                  <p class="sb-name"<%= ad_group_creatives.share_title%></p>
                  <p class="sb-desc"><%= ad_group_creatives.share_describe%></p>
                </div>
              </div>
              <p class="cy-txt">
                <%= ad_group_creatives.creative_copywriter%>
              </p>
              <div class="cy-img-list one">
                <a href="javascript:;"> <img src="<%= ad_group_creatives.banner_show_path1%>"></a>
              </div>
            </div>
          </div>
        </div>
        <% end %>
            <% if ad_group_creatives.crt_size_medium_menu_id == 2 %>
        <div class="cy-item col-sm-4">
          <div class="panel b-a cy-materials-item" name="creativeSelect">
            <input type="hidden" value="<%= ad_group_creatives.id%>"/>
            <div class="panel-heading bg text-lt">
              <span><%= ad_group_creatives.creative_name%></span>
            </div>
            <div class="content">
              <p class="cy-txt mt">
                <%= ad_group_creatives.creative_copywriter%>
              </p>
              <div class="cy-img-list one mt">
                <a href="javascript:;"> <img src=" <%= ad_group_creatives.banner_show_path1%>"></a>
              </div>
            </div>
          </div>
        </div>
        <% end %>
  </div>
  <!-- 分页 -->
  <div class="text-center">

  </div>
</div>
<script type="text/javascript">
    $().ready(function () {
        $("div[name=showOrhide]").hover(over, out)
        function over() {
            $(this).find("span").show()
        }

        function out() {
            $(this).find("span").hide();
        }
        //编辑广告,已经选择的创意显示高亮
        $("#creativesInputs").find("input[name='creativesId']").each(function () {
            var cid = $(this).val();
            $("#creativesList").find("div[name=creativeSelect]").each(function(){
                var id = $(this).find("input[type='hidden']").val();
                if(parseInt(cid) == parseInt(id)){
                    $(this).removeClass("b-a");
                    $(this).addClass("b-success");
                }
            });
        });
        //根据尺寸查询
        $("#crtSizeMediumMenuIds").change(function () {
            creativesPage(1,$(this).val(),$("#frontCompanyType").val());
        })

        //创意高亮
        $("div[name=creativeSelect]").hover(
            function () {
                $(this).addClass("b-info");
            },
            function () {
                $(this).removeClass("b-info");
            }
        );

        //选择创意
        $("div[name=creativeSelect]").click(function () {
            //获得该标签下隐藏的创意id
            var cid = $(this).find("input").val();
            console.log(cid);
            if ($(this).hasClass("b-success")) {
                $(this).removeClass("b-success");
                $(this).addClass("b-a");
                // 移除input的标签
                $("#id-" + cid).remove();
            } else {
                console.log($("#creativesInputs").html())
                console.log($("#creativesInputs").find("input[name='creativesId']").length);
                if ($("#creativesInputs input[name='creativesId']").length > 5) {
                    alert("一个广告下最多只能选择6条创意")
                    return
                }
                $(this).removeClass("b-a");
                $(this).addClass("b-success");
                var input = "<input id='id-" + cid + "' name='creativesId'  type='hidden' value='" + cid + "'/>";
                //添加创意
                $("#creativesInputs").append(input);
            }
        });
    })
    //分页查询
    function creativesPage(pageNumber,crtSize,sitesetType){
        $.ajax({
            url: "/ajax/front_creatives/select/"+sitesetType+"?pageNumber=" +pageNumber+"&crtSizeMediumMenuId="+crtSize,
            type: "GET",
            dataType: "html",
            cache: false,
            success: function(crreatives) {
                $("#creativesList").html(crreatives);
            }
        });
    }
</script>